<template>
	<view class="">
		<view class="tabs items-center justify-center">
			<view class="item" @click="handleClick(index)" v-for="(item,index) in list" :key="index">
				<view :class="['text',{active:isTabs == index}]">
					{{item.name}}
				</view>
				<view class="text-bg" v-if="isTabs == index"></view>
			</view>
		</view>
		<s-pull-scroll 
		ref="pullScroll" 
		:pullDown="pullDown" 
		:pullUp="loadData" 
		:back-top="true"
		top="100">
			<view class="" style="padding: 20rpx;">
				<item-list v-if="isTabs == 0" :list="dataList"></item-list>
				<tram-list v-else :list="dataList"></tram-list>
			</view>
		</s-pull-scroll>
		
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
import itemList from '@/components/page-item-list/index-item.vue';
import tramList from '@/components/page-item-list/tram-list.vue';
export default {
	components: {
		itemList,
		tramList
	},
	data() {
		return {
			dataList: [],
			key: '',
			point: uni.getStorageSync('point'),
			list:[{
				name:'汽车充电桩'
			},{
				name:'电动车充电桩'
			}],
			isTabs:0
		};
	},
	onLoad(options) {
		this.key = options.key;
		this.refresh();
	},
	methods: {
		pullDown(pullScroll) {
			setTimeout(() => {
				this.loadData(pullScroll);
			}, 200);
		},
		handleClick(e){
			this.isTabs = e
			this.refresh();
		},
		async loadData(pullScroll) {
			const data = {
				uid: uni.getStorageSync('uid'),
				longitude: this.point.longitude,
				latitude: this.point.latitude,
				pageNo: pullScroll.page,
				pageSize: '10',
				key: this.key,
				city: uni.getStorageSync('city'),
				distanceSearch: this.distanceSearch,
				field2:this.isTabs
			};
			if (pullScroll.page == 1) this.dataList = [];
			const res = await this.$request('recharge/list', data, { showLoading: true });
			if (res.result == 0) {
				res.data.list.forEach(el=>{
					this.$set(el,'labelList',[])
					if(el.lable && el.lable.icon && el.lable.id && el.lable.content){
						let icon = el.lable.icon.split(',')
						let id = el.lable.id.split(',')
						let content = el.lable.content.split(',')
						for(var i = 0; i < id.length; i++){
							el.labelList.push({
								icon:icon[i],
								id:id[i],
								content:content[i]
							})
						}
					}
				})
				this.dataList = this.dataList.concat(res.data.list);
				pullScroll.endByPage(Math.ceil(res.data.count / 10), res.data.list);
			} else {
				this.$util.msg(res.resultNote);
			}
		}
	}
};
</script>

<style scoped lang="scss">
	.tabs{
		padding: 30rpx;
		background-color: #fff;
		margin-bottom: 30rpx;
		.item{
			width: 45%;
			position: relative;
			.text{
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #666666;
				text-align: center;
			}
			.text-bg{
				width: 70rpx;
				height: 4rpx;
				position: absolute;
				bottom: -15rpx;
				left: 50%;
				transform: translateX(-50%);
				background-color: $uni-color-bg;
			}
			.active{
				font-weight: bold;
				color: #333333;
			}
		}
	}
</style>
